<template>
  <!-- 查看退费信息DIALOG   -->

  <div class="xueyuandingdanxinxi">
    <div><h4>学员基本信息</h4></div>
    <div class="xueyuandingdanxinxi1">
      <div class="xueyuanjibenxinxiDIV1">
        <div>姓名：{{ selectStudentList.student_name }}</div>
        <div>性别：
          <span v-if="selectStudentList.sex === 1"> 男 </span>
          <span v-if="selectStudentList.sex === 2"> 女 </span>
        </div>
        <div>就读年级：
          <span v-if="selectStudentList.course==null" style="color:#c8cace ;">无数据</span>
          <span v-else>{{ selectStudentList.course.grade }}</span>
        </div>
      </div>
      <div class="xueyuanjibenxinxiDIV2">
        <div>联系方式：{{ selectStudentList.phone }}</div>
        <div>所属校区：
          <span v-if="selectStudentList.course==null" style="color:#c8cace ;">无数据</span>
          <span v-else>{{ selectStudentList.course.school }}</span>
        </div>
      </div>
    </div>

    <div><h4>课程基本信息</h4></div>
    <div class="xueyuandingdanxinxi1">
      <div class="xueyuanjibenxinxiDIV1">
        <div>课程姓名：高中英语提高</div>
        <div>开课日期：2020-12-31</div>
        <div>上课时间：每周五19:30</div>
      </div>
      <div class="xueyuanjibenxinxiDIV2">
        <div>任课老师：张薇薇</div>
        <div>联系方式：1781116478</div>
        <div>所属校区：智助教育南校区</div>
      </div>
    </div>
    <div class="jindutushi">进度图示</div>
    <div class="xueyuandingdanxinxiDiv3">
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
    </div>

    <div><h4>商品购买记录</h4></div>
    <div class="xueyuandingdanxinxi1">
      <el-table border :data="queryGoodsData.order_pay" style="width: 100%">
        <el-table-column width="120" prop="pay_lession.lession.lession_num" label="商品编号" align="center" />
        <el-table-column width="200" prop="pay_lession.lession.lession_name" label="商品名称" align="center" />
        <el-table-column prop="pay_num" label="购买数量" align="center" />
        <el-table-column prop="pay_lession.price" label="商品单价" align="center" />
        <el-table-column prop="pay_lession.price" label="实付金额" align="center" />
      </el-table>
    </div>

    <div><h4>学员缴费记录</h4></div>
    <div class="xueyuandingdanxinxi1">
      <div class="xueyuanjibenxinxiDIV1">
        <div>订单编号：{{ queryGoodsData.order_num }}</div>
        <div>缴费类型：
          <span v-if="queryGoodsData.type==1">定金</span>
          <span v-if="queryGoodsData.type==2">学费</span>
        </div>
        <!-- <div>上课时间：每周五19:30</div> -->
        <div>缴费方式：
          <span v-if="queryGoodsData.pay_type==1">现金</span>
          <span v-if="queryGoodsData.pay_type==2">刷卡</span>
          <span v-if="queryGoodsData.pay_type==3">微信</span>
          <span v-if="queryGoodsData.pay_type==4">支付宝</span>
        </div>
      </div>
      <div class="xueyuanjibenxinxiDIV2">
        <div>收款日期：{{ queryGoodsData.create_time }}</div>
        <div>收款人：{{ queryGoodsData.teacher_name }}</div>
        <div>交易编号：{{ queryGoodsData.pay_num }}</div>
      </div>
    </div>

    <span slot="footer" class="footer">
      <el-button>打印</el-button>
      <el-button type="primary" @click="chakantuikuanjinduDialog = true">查看退款进度</el-button>
    </span>

    <!-- 查看退费进度DIALOG   -->
    <el-dialog title="退款进度" :visible.sync="chakantuikuanjinduDialog" width="60%" append-to-body>
      <div>
        <el-steps :active="2">
          <el-step title="提交申请" />
          <el-step title="教学部门确认" />
          <el-step title="财务审核" />
          <el-step title="招生部门确认" />
          <el-step title="退款" />
        </el-steps>
        <div class="tuifeijinduForm">
          <el-form label-position="right" label-width="100px" :model="returnData">
            <el-form-item label="订单编号">
              <div>{{ returnData.order_id }}</div>
            </el-form-item>
            <el-form-item label="退费金额">
              <div>{{ returnData.back_fees }}</div>
            </el-form-item>
            <el-form-item label="退费方式">
              <div>
                <span v-if="returnData.return_type==1">现金</span>
                <span v-if="returnData.return_type==2">刷卡</span>
                <span v-if="returnData.return_type==3">微信</span>
                <span v-if="returnData.return_type==4">支付宝</span>
              </div>
            </el-form-item>
            <el-form-item label="备注">
              <div>{{ returnData.desc }}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chakantuikuanjinduDialog = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
    // 子组件，通过props属性设置向外的接口属性
    props: {
        selectStudentList: {
            type: Object,
            default() {
                return {}
            }
        },
        queryGoodsData: {
            type: Object,
            default() {
                return {}
            }
        },
        returnData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            chakantuikuanjinduDialog: false
        }
    }
}
</script>

<style scoped lang="scss">
  .xueyuandingdanxinxi {
    margin-left: 10px;
    .jindutushi {
      margin-left: 10px;
    }
    .xueyuandingdanxinxiDiv3 {
      display: flex;
      justify-content: space-around;
      margin: 20px 0 0 50px;
      div {
        border: 1px solid rgb(97, 87, 87);
        border-radius: 12px;

        width: 100px;
        height: 100px;
      }
    }
    .xueyuandingdanxinxi1 {
      display: flex;
      margin-bottom: 30px;
      .xueyuanjibenxinxiDIV1 {
        margin-left: 10px;
        div {
          margin-top: 12px;
        }
      }
      .xueyuanjibenxinxiDIV2 {
        margin-left: 150px;
        div {
          margin-top: 12px;
        }
      }
    }
  }
  .tuifeijinduForm {
    width: 500px;
    margin: 50px 0 0 150px;
  }
  .footer{
    display: flex;
    justify-content: flex-end;
  }
</style>
